<!--登录页面-->
<template>

  <f7-page no-toolbar :page-content="false">
    <f7-navbar title="小聚欢迎您" back-link="Back"></f7-navbar>

    <f7-toolbar tabbar top>
      <f7-link tab-link="#pwdTab" tab-link-active>密码登录</f7-link>
      <f7-link tab-link="#smsTab">短信登录</f7-link>
    </f7-toolbar>
    <f7-tabs swipeable>
      <f7-tab id="pwdTab" tab-active>

        <f7-page login-screen no-navbar>
        <f7-block style="font-size: 18px;">
        </f7-block>

        <!--<f7-login-screen-title>登录</f7-login-screen-title>-->
        <f7-list form>
          <f7-list-input style="padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));"
                  label="手机号"
                  name="username"
                  placeholder="请输入手机号码"
                  type="text"
          />
          <f7-list-input style="padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));"
                  label="密码"
                  name="password"
                  type="password"
                  placeholder="请输入登录密码"
          />

          <!--如果超过3次错误，需输入验证码-->
          <f7-list-item>
            <f7-list-input
                    label="验证码"
                    name="username"
                    placeholder="请输入验证码"
                    type="text"
            />
            <f7-link style="width: 50%" >
              <img src="../../img/yzm.png" style="width: 70%;"/>
            </f7-link>
          </f7-list-item>

        </f7-list>
        <f7-list style="width: 84%;text-align:center;">
          <f7-button fill round text="登录"></f7-button>
        </f7-list>
        <f7-block>
          <f7-row>
            <f7-col><f7-button href="/login/registerOne/" target="_blank" title="">我要注册</f7-button></f7-col>
            <f7-col><f7-button href="/login/resetPwd/" target="_blank" title="">忘记密码</f7-button></f7-col>
          </f7-row>
        </f7-block>
        <f7-block-title>第三方登录</f7-block-title>
        <f7-row style="margin-top: 14px;">
          <f7-col>
            <div class="" style="text-align: center;">
              <f7-link tab-link="#tab-2">
                <div>
                  <div>
                    <!--<f7-icon size="32px" f7="chat"></f7-icon>-->
                    <img src="../../img/qq-128-2.png" style="height: 40px;"/>
                  </div>
                  <!--<span>QQ</span>-->
                </div>
              </f7-link>
            </div>
          </f7-col>

          <f7-col>
            <div class="" style="text-align: center;">
              <f7-link tab-link="#tab-2">
                <div>
                  <div>
                    <img src="../../img/weixin-128-2.png" style="height: 40px;"/>
                  </div>
                  <!--<span>微信</span>-->
                </div>
              </f7-link>
            </div>
          </f7-col>

          <f7-col>
            <div class="" style="text-align: center;">
              <f7-link tab-link="#tab-2">
                <div>
                  <div>
                    <img src="../../img/sina-128-2.png" style="height: 40px;"/>
                  </div>
                  <!--<span>微博</span>-->
                </div>
              </f7-link>
            </div>
          </f7-col>
          <!--          <f7-col>
                      &lt;!&ndash;空的一列&ndash;&gt;
                    </f7-col>-->
        </f7-row>
        </f7-page>
      </f7-tab>

      <!--短信登录方式-->
      <f7-tab id="smsTab">
        <f7-page login-screen no-navbar>
        <!--<f7-login-screen-title>登录</f7-login-screen-title>-->
        <f7-block style="font-size: 18px;">
          <!--短信登录更快捷-->
        </f7-block>
        <f7-list form >
          <f7-list-input style="padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));"
                  label="手机号"
                  name="username"
                  placeholder="请输入手机号码"
                  type="text"
          />
          <f7-list-item>
            <f7-list-input
                    label="短信验证码"
                    name="username"
                    placeholder="请输入短信验证码"
                    type="text"
            />
            <f7-link style="width: 50%" @click="sheetOpened = true" round text="获取 60s"></f7-link>
          </f7-list-item>

        </f7-list>
        <f7-list style="width: 84%;text-align:center;">
          <f7-button fill round text="登录"></f7-button>
        </f7-list>


        <f7-block-title>第三方登录</f7-block-title>
        <f7-row style="margin-top: 14px;">
          <f7-col>
            <div class="" style="text-align: center;">
              <f7-link tab-link="#tab-2">
                <div>
                  <div>
                    <!--<f7-icon size="32px" f7="chat"></f7-icon>-->
                    <img src="../../img/qq-128-2.png" style="height: 40px;"/>
                  </div>
                  <!--<span>QQ</span>-->
                </div>
              </f7-link>
            </div>
          </f7-col>

          <f7-col>
            <div class="" style="text-align: center;">
              <f7-link tab-link="#tab-2">
                <div>
                  <div>
                    <img src="../../img/weixin-128-2.png" style="height: 40px;"/>
                  </div>
                  <!--<span>微信</span>-->
                </div>
              </f7-link>
            </div>
          </f7-col>

          <f7-col>
            <div class="" style="text-align: center;">
              <f7-link tab-link="#tab-2">
                <div>
                  <div>
                    <img src="../../img/sina-128-2.png" style="height: 40px;"/>
                  </div>
                  <!--<span>微博</span>-->
                </div>
              </f7-link>
            </div>
          </f7-col>
          <!--          <f7-col>
                      &lt;!&ndash;空的一列&ndash;&gt;
                    </f7-col>-->
        </f7-row>
        </f7-page>
      </f7-tab>
    </f7-tabs>


    <f7-sheet class="demo-sheet" :opened="sheetOpened" @sheet:closed="sheetOpened = false">
      <f7-toolbar>
        <div class="left">
          <f7-link sheet-close>关闭</f7-link>
        </div>
        <div class="right">
          <f7-link >确认</f7-link>
        </div>
      </f7-toolbar>
      <!-- Scrollable sheet content -->
      <f7-page-content login-screen>
        <f7-list>
        <f7-list-item>
          <f7-list-input no-hairlines
                         label="验证码"
                         name="username"
                         placeholder="请输入验证码"
                         type="text"
          />
          <f7-link style="width: 50%" >
            <img src="../../img/yzm.png" style="width: 80%;"/>
          </f7-link>
        </f7-list-item>
        </f7-list>
      </f7-page-content>
    </f7-sheet>

  </f7-page>

</template>


<script>
  // import thirdLogin from '../../components/thirdLogin.vue';
  // import footerTabbar from '../../components/footerTabbar.vue';
  import routes from '../../routes.js'

  import qqImg from '../../img/qq-128-2.png'

  export default {
    // components: {footerTabbar,thirdLogin},
    data() {
      return {
        // Framework7 parameters here
        f7params: {
          // App routes
          routes: routes,
        },
        qqImg:qqImg,
        sheetOpened: false,
      }
    }
  }
</script>

<style scoped>

</style>
